<template>
	<view class="container pageBg">
		<!-- 文字内容输入 -->
		<view class="content-box">
			<textarea v-model="content" placeholder="请输入内容..." class="content-input" auto-height />
		</view>

		<!-- 图片上传区域 -->
		<view class="upload-section">
			<view class="preview-list">
				<view v-for="(img, index) in imageList" :key="img" class="preview-item">
					<image :src="img" class="preview-image" mode="aspectFill" />
					<view class="delete-btn" @click="deleteImage(index)">×</view>
				</view>
				<view v-if="imageList.length < 9" class="upload-btn" @click="chooseImage">
					<uni-icons type="plusempty" size="30" color="#999" />
					<text class="upload-text">添加图片</text>
				</view>
			</view>
		</view>

		<!-- 视频上传区域 -->
		<view class="upload-section">
			<view class="btn">
				<button class="submit-btn" @click="handleSubmit">发布</button>
				<button class="submit-btn" @click="handleNoSubmit">取消</button>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const content = ref('');
	const imageList = ref([]);
	const imageListId = ref([]);
	const videoUrl = ref('');

	// 选择图片
	const chooseImage = () => {
		try {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success(res) {
					imageList.value = [...imageList.value, ...res.tempFilePaths];
					res.tempFilePaths.forEach(item => {
						                console.log(item)
										//上传
										uni.uploadFile({
											url: 'http://localhost:8081/file/upload',
											filePath: item, //图片路径
											name: 'file',
											header: {
											  'Authorization': 'Bearer ' + uni.getStorageSync('token') // 从本地存储获取token
											},
											success: (uploadFileRes) => {
												const responseData = JSON.parse(uploadFileRes.data)
												console.log("本次添加图片id为",responseData.result.id)
												imageListId.value = [...imageListId.value, responseData.result.id];
												console.log(imageListId)
											}
										});
									})
				}
			});
			
		} catch (err) {
			console.log(err)
			console.log('取消选择');
		}
	};

	// 删除图片
	const deleteImage = (index) => {
		imageList.value.splice(index, 1);
	};

	// 提交处理
	const handleSubmit = () => {
		if (!content.value.trim() && imageList.value.length === 0 && !videoUrl.value) {
			return uni.showToast({
				title: '内容不能为空',
				icon: 'none'
			});
		}
		console.log("今日的内容是" + content.value)
		uni.request({
			url: "http://localhost:8081/sysDynamics/newDynamics",
			method: 'POST',
			header: {
				'Authorization': 'Bearer ' + uni.getStorageSync('token') // 从本地存储获取token
			},
			data: {
				content: content.value,
				filesIds: imageListId.value
			}
		}).then((res) => {
			if (res.data.code === '200') {
				console.log("结果为", res)
				uni.showToast({
					title: '发布成功!',
					icon: 'success'
				})
				// 登录成功后的处理
				uni.navigateTo({
					url: '/pages/Post/Post?taskId='+res.data.result
				})
			} else {
				console.log("结果为", res)
				uni.showToast({
					title: res.data.message || '登录失败',
					icon: 'none'
				})

			}
		})
	};
	const handleNoSubmit = async () => {
		uni.switchTab({
			url: '/pages/moments/moments'
		})
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}

	.btn {
		padding: 20rpx;
		width: 300rpx;
		display: flex;
		justify-content: space-between;
	}

	.submit-btn {

		background: #007AFF;
		color: white;
		font-size: 28rpx;
		border-radius: 40rpx;
	}

	.content-box {
		margin: 30rpx 0;
	}

	.content-input {
		width: 100%;
		min-height: 200rpx;
		font-size: 32rpx;
		line-height: 1.5;
	}

	.upload-section {
		margin: 40rpx 0;
	}

	.preview-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.preview-item,
	.upload-btn {
		width: 220rpx;
		height: 220rpx;
		border: 2rpx dashed #ddd;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.preview-image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.video-preview {
		width: 100%;
		position: relative;
	}

	.video-player {
		width: 100%;
		height: 400rpx;
		border-radius: 10rpx;
	}

	.delete-btn {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		width: 40rpx;
		height: 40rpx;
		background: #ff4444;
		border-radius: 50%;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		z-index: 1;
	}

	.upload-text {
		color: #999;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
</style>